<template>
  <a-modal v-model:visible="visible" width="90%" :footer="false">
    <template #title>
      {{ `导入表结构选择` }}
      <a-link style="margin-left: 10px" icon>仅支持sqlite、MYSQL</a-link>
    </template>
    <GiTable
      v-model:selected-keys="selectedKeys"
      row-key="tableName"
      :data="dataList"
      :columns="columns"
      :loading="loading"
      :scroll="{ x: '100%', y: '100%', minWidth: 600 }"
      :disabled-tools="['size', 'setting']"
      :disabled-column-keys="['name']"
      :row-selection="{ type: 'checkbox', showCheckedAll: true }"
      :pagination="pagination"
      @select="select"
      @select-all="selectAll"
      @refresh="search"
    >
      <template #toolbar-left>
        <a-button v-permission="['system:gen:import']" type="primary" status="warning" @click="onSave">
          <template #icon><icon-import /></template>
          <span>导入</span>
        </a-button>
      </template>
      <template #toolbar-right>
        <a-input v-model="queryForm.tableName" placeholder="请输入表名" allow-clear @change="search">
          <template #prefix><icon-search /></template>
        </a-input>
        <a-button @click="reset">重置</a-button>
      </template>

      <template #action="{ record }">
        <a-space>
          <a-link v-permission="['system:gen:update']" :disabled="true" @click="onimportCmd(record)">导入</a-link>
        </a-space>
      </template>
    </GiTable>
  </a-modal>
</template>

<script setup lang="ts">
import { Message } from '@arco-design/web-vue'
import has from '@/utils/has'
import { useTable } from '@/hooks'
import type { TableInstanceColumns } from '@/components/GiTable/type'
import { importTable, listDbTablePage } from '@/apis/code/generator'

const emit = defineEmits<{
  (e: 'save-success'): void
}>()

const queryForm = reactive({
  tableName: '',
  sort: ['createTime,desc'],
})

const visible = ref(false)
const {
  tableData: dataList,
  pagination,
  loading,
  selectedKeys,
  select,
  selectAll,
  search,
} = useTable((page) => listDbTablePage({ ...queryForm, ...page }), { immediate: false })

const columns: TableInstanceColumns[] = [
  {
    title: '序号',
    width: 66,
    align: 'center',
    render: ({ rowIndex }) => h('span', {}, rowIndex + 1 + (pagination.current - 1) * pagination.pageSize),
  },
  { title: '表名称', dataIndex: 'tableName', slotName: 'tableName', ellipsis: true, tooltip: true },
  { title: '描述', dataIndex: 'tableComment', ellipsis: true, tooltip: true },
  {
    title: '操作',
    slotName: 'action',
    width: 200,
    align: 'center',
    show: has.hasPermOr(['system:role:update', 'system:role:delete']),
  },
]
// 重置
const reset = () => {
  queryForm.tableName = ''
  search()
}
// 新增
const onSave = () => {
  if (!selectedKeys.value.length) {
    return Message.warning('请勾选数据')
  }
  importTable({ tables: selectedKeys.value }).then((res: any) => {
    if (res.code !== 200) {
      return Message.error(res.msg)
    }
    Message.success('导入生成表成功！')
    emit('save-success')
    visible.value = false
  })
}
// 新增
const onimportCmd = (record: any) => {
  Message.warning('功能暂未实现')
  confole.log(record)
}

// 打开
const onPreview = async () => {
  visible.value = true
  search()
}
defineExpose({ onPreview })
</script>

  <style scoped>
  </style>
